<template>
  <div class="sidebar">
    <el-menu
      :default-active="routePath"
      active-text-color="#20a0ff"
      class="sidebar-el-menu"
      router
    >
    <!-- 使用template总是报错，改成div无报错 -->
    <div v-for="item in items.items" :key="item.index">
        <!-- 循环菜单栏 -->
        <el-submenu :index="item.index" :key="item.index">
            <!-- 一级菜单栏 -->
            <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.title }}</span>
            </template>
            <!-- 二级菜单栏 -->
            <div v-for="subItem in item.data" :key="subItem.index" >
                <template slot="title"></template>
                <el-menu-item class="menu-item" :index="subItem.index">{{ subItem.title }}</el-menu-item>
            </div>
        </el-submenu>
    </div>
    </el-menu>
  </div>
</template>

<script>
export default {
    name: "SideBar",
    // 监听菜单栏的数据
    computed: {
        items() {
            return this.$store.state.sideBarItems;
        },
        routhPath(){
            return this.$route.path;
        }
    }
}
</script>

<style scoped>
.sidebar{
    display:block;
    position: absolute;
    left: 0;
    top:114px;
    bottom: 0;
    overflow-y: scroll;
    border-right: 0.1px solid #DCDFE6;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 170px;
}
.sidebar::-webkit-scrollbar {
    width: 0px;
  }
.menu-item{
    height: 40px;
}
</style>